<template>
  <div id="wangeditor">
    <div ref="editorElem" style="text-align:left"></div>
<!--    <span :class='["words-count", {"words-count-error": wordsCount > maxLength}]' v-if='showWordCount'>( {{wordsCount}}/{{maxLength}} )</span>-->
  </div>
</template>

<script>
  import E from 'wangeditor'
  import Cookies from 'js-cookie'
  import {
    uploadFile,
    getFile
  } from "@/api";

  export default {
    name: 'editorElem',
    data() {
      return {
        editor: null,
        updates: null,
        maxLength: this.maxLen,
        wordsCount: this.wordscount
      }
    },
    props: {
      catchContent: {
        type: String,
        default: ''
      },
      hideImg: {
        type: Boolean,
        default: false
      },
      keys: {
        default: 0
      },
      showWordCount: {
        default: true
      },
      wordscount: {
        default: 0
      },
      maxLen: {
        default: 2000
      }
    },
    watch: {
      keys(cur, old) {
        this.editor.txt.html(this.catchContent);
      },
    },
    mounted() {
      let that = this
      that.editor = new E(this.$refs.editorElem)        //创建富文本实例
      that.editor.customConfig.onchange = (html) => {
        if(html == '<p><br></p>'){
          this.$emit('update:catchContent','');
        }else {
          this.$emit('update:catchContent',html);
        }
        if (that.showWordCount) {
          that.wordsCount = that.editor.txt.text().length
          that.$emit('update:wordscount', that.wordsCount)
          // if (that.wordsCount > that.maxLength) {
          //   that.$message.error(`文章内容最大限制${that.maxLength}字`)
          // }
        }
        if(html != '' && html != '<p><br></p>'){
          that.$emit('clearValidate')
        }
      }
      that.editor.customConfig.pasteFilterStyle = false; //忽略粘贴内容中的图片
      that.editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024; // 将图片大小限制为 2M
      that.editor.customConfig.uploadImgMaxLength = 1; // 限制一次最多上传 1 张图片
      that.editor.customConfig.zIndex = 1000
      that.editor.customConfig.customAlert = function (info) {
        // info 是需要提示的内容
        that.editorTips(info)
      }
      that.editor.customConfig.menus = [       //菜单配置
        'head',  // 标题
        'bold',  // 粗体
        'fontSize',  // 字号
        'fontName',  // 字体
        'italic',  // 斜体
        'underline',  // 下划线
        'strikeThrough',  // 删除线
        'foreColor',  // 文字颜色
        'backColor',  // 背景颜色
        'link',  // 插入链接
        'list',  // 列表
        'justify',  // 对齐方式
        'quote',  // 引用
        // 'emoticon',  // 表情
        'table',  // 表格
        'undo',  // 撤销
        'redo',  // 重复
      ]
      if (that.hideImg == false) {
        that.editor.customConfig.menus.splice(that.editor.customConfig.menus.length-4,0,'image')  // 插入图片
      }
      // 自定义配置颜色（字体颜色、背景色）
      that.editor.customConfig.colors = [
        '#000000',
        '#333333',
        '#666666',
        '#999999',
        '#ffffff',
        '#EF1A1A',
        '#03A9F5',
        '#F7AB2B',
        '#8baa4a',
        '#FF7EA3',
      ]
      /*自定义图片下载*/
      that.editor.customConfig.customUploadImg = async (files, insert) => {
        /* files 是 input 中选中的文件列表 */
        var fileObj = files[0];
        var parame = new FormData();
        parame.append("projectName", fileObj.name);
        parame.append("file", fileObj);
        let data = await uploadFile(parame)
        let url = `${getFile}?id=${data.data.id}`
        /* insert 是编辑器自带的 获取图片 url 后，插入到编辑器的方法 上传代码返回结果之后，将图片插入到编辑器中*/
        insert(url)
      }
      that.editor.create()
      if (this.catchContent) {
        //回显数据
        that.editor.txt.html(this.catchContent);
        that.wordsCount = that.editor.txt.text().length
        that.$emit('update:wordscount', that.wordsCount)
      }
    },
    methods: {
      editorTips(info) {
        this.$message({
          showClose: true,
          message: info,
          type: 'error'
        });
      },
    }
  }
</script>
<style lang='less'>
  #wangeditor {
    position: relative;
    .w-e-toolbar {
      flex-wrap: wrap;
    }
    .w-e-text-container{
      color: #666666;
      letter-spacing: 0.6px;
    }
    .words-count {
      position: absolute;
      padding-left: 10px;
      right: 0px;
      transform: translateX(100%);
      bottom: 0;
      line-height: 50px;
      color: #606266;
      &.words-count-error {
        color: #F56C6C;
      }
    }
  }
</style>
